<template>
  <a-modal
    :visible="visible"
    :title="title"
    width="90%"
    @ok="save"
    @cancel="cancel"
  >
    <a-form
      ref="formReport"
      :form="form"
    >
      <a-row>
        <a-col :span="7">
          <a-form-item
            label="账套名称"
            v-bind="formItemLayout"
          >
            <a-input
              allowClear
              size="large"
              type="text"
              autocomplete="false"
              placeholder="请输入账套名称"
              v-decorator="[
                            'accountName',
                            {
                            rules: [
                                { required: true, message: '请输入账套名称' },
                            ],
                            validateTrigger: [ 'blur']
                            },
                        ]"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="1"></a-col>
        <a-col :span="7">
          <a-form-item
            label="法人代表"
            v-bind="formItemLayout"
          >
            <a-input
              allowClear
              size="large"
              type="text"
              autocomplete="false"
              placeholder="请输入法人代表"
              v-decorator="[
                            'legalPerson'
                        ]"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="1"></a-col>
        <a-col :span="7">
          <a-form-item
            label="单位名称"
            v-bind="formItemLayout"
          >
            <a-input
              allowClear
              size="large"
              type="text"
              autocomplete="false"
              placeholder="请输入单位名称"
              v-decorator="[
                            'companyName',
                            {
                            rules: [
                                { required: true, message: '请输入单位名称' },
                            ],
                            validateTrigger: [ 'blur']
                            },
                        ]"
            ></a-input>
          </a-form-item>
        </a-col>
         <a-col :span="1"></a-col>
      </a-row>
      <a-row>
        <a-col :span="7">
          <a-form-item
            label="邮政编码"
            v-bind="formItemLayout"
          >
            <a-input
              allowClear
              size="large"
              type="text"
              autocomplete="false"
              placeholder="请输入邮政编码"
              v-decorator="[
                            'postalCode'
                        ]"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="1"></a-col>
        <a-col :span="7">
          <a-form-item
            v-bind="formItemLayout"
            label="企业类型"
          >
            <a-select
              size="large"
              placeholder="企业类型"
              @change="industryChange"
              v-decorator="[
                            'companyType',
                            {
                            rules: [
                                {required: true, message: '请选择企业类型' },
                            ]
                            },
                        ]"
            >
              <a-select-option
                v-for="(item,index) in companyTypeList"
                :key="index"
                :value="item"
              >{{item}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="1"></a-col>
        <a-col :span="7">
          <a-form-item
            v-bind="formItemLayout"
            label="行业性质"
          >
            <a-select
              size="large"
              placeholder="请选择行业性质"
              @change="industryChange"
              v-decorator="[
                            'companyIndustry',
                            {
                            rules: [
                                {required: true, message: '请选择行业性质' },
                            ]
                            },
                        ]"
            >
              <a-select-option
                v-for="(item,index) in industryList"
                :key="index"
                :value="item.name"
              >{{item.name}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="1"></a-col>
      </a-row>
      <a-row>
        <a-col :span="7">
          <a-form-item
            label="联系电话"
            v-bind="formItemLayout"
          >
            <a-input
              allowClear
              size="large"
              type="text"
              autocomplete="false"
              placeholder="请输入联系电话"
              v-decorator="[
                            'contactNumber'
                        ]"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="1"></a-col>
        <a-col :span="7">
          <a-form-item
            v-bind="formItemLayout"
            label="行政区"
          >
            <a-cascader
              placeholder="请选择行政区"
              size="large"
              :field-names="{ label: 'title', value: 'title',children: 'children'}"
              v-decorator="[
                        'areaName',
                        {
                        rules: [
                            { type: 'array', required: true, message: '请选择行政区' },
                        ]
                        },
                    ]"
              :options="regions"
            />
          </a-form-item>
        </a-col>
        <a-col :span="1"></a-col>
        <a-col :span="7">
          <a-form-item
            label="开户银行"
            v-bind="formItemLayout"
          >
            <a-input
              allowClear
              size="large"
              type="text"
              autocomplete="false"
              placeholder="请输入开户银行"
              v-decorator="[
                        'openingBank'
                    ]"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="1"></a-col>
      </a-row>
      <a-row>
        <a-col :span="7">
          <a-form-item
            v-bind="formItemLayout"
            label="报税地区"
          >
            <a-select
              size="large"
              placeholder="请选择报税地区"
              v-decorator="[
                        'taxArea'
                    ]"
            >
              <a-select-option
                v-for="(item,index) in taxAreaList"
                :key="index"
                :value="item.areaName"
              >{{item.areaName}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="1"></a-col>
        <a-col :span="7">
          <a-form-item
            label="统一代码"
            v-bind="formItemLayout"
          >
            <a-input
              allowClear
              size="large"
              type="text"
              autocomplete="false"
              placeholder="请输入统一代码"
              v-decorator="[
                        'unifiedSocialCode'
                    ]"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="1"></a-col>
        <a-col :span="7">
          <a-form-item
            v-bind="formItemLayout"
            label="纳税性质"
          >
            <a-select
              style="margin-left:4px;"
              size="large"
              placeholder="请选择纳税性质"
              v-decorator="[
                        'taxNature'
                    ]"
            >
              <a-select-option
                v-for="(item,index) in taxNatureList"
                :key="index"
                :value="item"
              >{{item}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="1"></a-col>
      </a-row>
      <a-row>
        <a-col :span="7">
          <a-form-item
            label="税率%"
            v-bind="formItemLayout"
          >
            <a-input
              allowClear
              size="large"
              type="number"
              min="0"
              max="100"
              autocomplete="false"
              placeholder="请输入税率"
              v-decorator="[
                        'taxRate'
                    ]"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="1"></a-col>
        <a-col :span="7">
          <a-form-item
            v-bind="formItemLayout"
            label="备注"
          >
            <a-input
              allowClear
              size="large"
              type="text"
              autocomplete="false"
              placeholder="请输入备注"
              v-decorator="[
                        'remarks'
                    ]"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="1"></a-col>
        <a-col :span="7">
          <a-form-item
            label="账套主管"
            v-bind="formItemLayout"
          >
            <input-group-search
              modalTitle="选择账套主管"
              labelStyle="display:none;"
              rightClass="myRightClass"
              class="ml-1 mb-2"
              v-model="accMaster.accountMasterId"
              :valueTitle.sync="accMaster.accountMasterName"
              treeType="officeUser"
              :clearValueIcon="false"
            ></input-group-search>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="7" v-if="isFirstYear || postData.isFirstYear">
          <a-form-item
           
            label="首年启用期间"
            v-bind="formItemLayout"
          >
            <a-select  style="width:100%"  size="large"
                      v-decorator="[
                            'enableDuration',
                            {
                            rules: [
                                {required: true, message: '首年启用期间' },
                            ]
                            },
                        ]"
            >
              <a-select-option 
                v-for="(item,index) in DurationList"
                :key="index"
                :value="item"
              >{{item}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script>

import { areaPageListToTreeForId } from "@/utils/tree";
import { treeList } from "@/api/area";
import { industryList } from "@/api/industry";
import {
  add as AddAccount,
  edit as EditAccount
} from "@/api/erp/account";

export default {
  data() {
    return {
      visible:false,
      title:"编辑",
      isFirstYear: false,
      postData:{},
      //表单信息
      // form: this.$form.createForm(this, { name: "accountForm" }),
      //输入框布局
      formItemLayout: {
          labelCol: { span: 6 },
          wrapperCol: { span: 18 }
      },
      companyTypeList: ["工业", "商业", "服务业", "金融业"],
      //报税地区列表
      taxAreaList: [],
      //纳税性质列表
      taxNatureList: ["一般纳税人","小规模税人"],
      //行政区信息
      regions: [],
      //行业信息列表
      industryList: [],
      //账套主管信息
      accMaster: {},
      DurationList:[1,2,3,4,5,6,7,8,9,10,11,12],
      enableDuration: moment().month() + 1,         //启用期间（首次才可以编辑）
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "a" });
  },
  created(){
    this.areaTree();
    this.ListIndustry();
  },
  methods: {
     //加载 区域数据
    areaTree() {
      treeList()
        .then(response => {
          if (response.code === 200) {
            const { data } = response;
            const childrenNav = [];
            const province = data.filter(f=>f.parentCode == 0);
            this.taxAreaList = province;
            areaPageListToTreeForId(data, childrenNav, 0);
            console.log("加载 区域数据:", childrenNav);
            this.regions = childrenNav;
          }
        })
        .catch(error => {});
    },
    //加载行业性质
    ListIndustry() {
      industryList()
        .then(response => {
          if (response.code === 200) {
            const { data } = response;
            this.industryList = data;
          }
        })
        .catch(error => {});
    },
    //选择行业性质：
    industryChange(value) {
      console.log("选择行业性质：", value);
    },


    //初始化 数据
    initData(){
        this.form.resetFields();
        console.log("创建新表单form：",this.form)
        let { postData ,isFirstYear,enableDuration} = this;
        console.log("账套编辑初始化数据：",postData)
        for(let key in postData){
          console.log("key：", key ,",postData[key]",postData[key]);
          
        }
        this.form.setFieldsValue({...postData});
        console.log("获取刚刚赋的值：",this.form.getFieldsValue())
        //行政区 赋值
        if(postData.areaName){
            let strArr = postData.areaName.split("/");
            this.form.setFieldsValue({
              areaName: strArr
            });
          } 
        //账套主管 赋值
        if(postData.accountMasterId){
          let {accountMasterId,accountMasterName } = postData;
          Object.assign(this.accMaster,{ accountMasterId,accountMasterName });
        }
        //启用期间 赋值 
        if(isFirstYear){
           console.log("我已经到底现场",isFirstYear + '',enableDuration)
           this.form.setFieldsValue({
              enableDuration : enableDuration
            });
        }
    },
    //保存
    save() {
      let { postData , accMaster} = this;
      let saveFun = postData.id ? EditAccount : AddAccount;
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
         Object.assign(postData,{...values,...accMaster});
          if( postData.areaName){
            postData.areaName = postData.areaName.join("/");
          }
         
          console.log("数据提交：",postData);
          saveFun(postData).then(res => {
            if (res.code == 200) {
              this.$message.success('保存成功');
              this.visible = false;
              this.$emit("ok");
            }else{
              // this.$message.warning(res.message);
            }
          });
        }
      });
    },
    //取消
    cancel() {
      this.form.resetFields();
      this.visible = false;
    }
  }
};
</script>

<style>
</style>